<template>
  <div class="finish">
    <div class="search-box flex">
      id:
      <el-input v-model="inputId" placeholder="请输入内容"></el-input> 站点名称:
      <el-input v-model="inputZd" placeholder="请输入内容"></el-input>
      内容关键字:
      <el-input v-model="inputKey" placeholder="请输入内容"></el-input>
      <button class="search-btn" @click="searchId">搜索</button>
    </div>

    <div class="table">
      <div class="table-title flex align-center">
        <img
          src="../../assets/images/wancheng.png"
          style="margin-right: 10px"
          alt=""
        />
        已完结
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        @select="addId"
        style="width: 100%"
      >
        <el-table-column label="排期信息" align="center">
          <el-table-column
            type="selection"
            prop="name"
            label="选择"
            width="60"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="id" label="id" align="center">
          </el-table-column>
          <el-table-column prop="cityname" label="站点名称" align="center">
          </el-table-column>
          <el-table-column prop="url" label="网址" align="center">
          </el-table-column>
          <el-table-column prop="feed_content" label="反馈内容" align="center">
          </el-table-column>
          <el-table-column prop="add_time" label="时间" align="center">
          </el-table-column>
        </el-table-column>
        <el-table-column prop="user" label="用户满意度" align="center">
        </el-table-column>
        <el-table-column
          prop="statusType"
          label="状态"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="zip" label="操作" align="center" width="240">
          <template slot-scope="scope">
            <el-button
              @click="openDialog(scope.row, 1)"
              style="color: #333"
              type="text"
              >【发送消息】</el-button
            >
            <el-button
              type="text"
              style="color: #333"
              @click="openDialog(scope.row, 2)"
              >【查看】</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="tools">
        <div class="flex flex-end">
          <button class="send-all" @click="sendAll">批量发送消息</button>
        </div>
        <div class="flex flex-end">
          <el-pagination
            :current-page="currentPage"
            @current-change="handleCurrentChange"
            :page-size="10"
            layout="prev, pager, next, jumper"
            :total="dataCount"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <!-- 弹窗 -->
    <el-dialog
      custom-class="dia-check"
      :visible.sync="dialogFormVisible1"
      width="644px"
      @close="closeCheck"
    >
      <div slot="title" class="dialog-footer">
        <div class="dia-title flex align-center">
          <img src="../../assets/images/nof-send.png" alt="" />单个发送消息
        </div>
      </div>
      <div class="dia-body">
        <div>
          <span class="db-title flex flex-end">id:</span>
          <span>{{ form.id }}</span>
        </div>
        <div>
          <span class="db-title flex flex-end">网址:</span>
          <span class="cursor" style="color: #333" @click="openUrl(form.url)">{{ form.url }}</span>
        </div>
        <div>
          <span class="db-title flex flex-end">反馈内容:</span>

          <span>
            {{ form.feed_content }}
          </span>
        </div>
        <div>
          <span class="db-title flex flex-end">联系电话:</span
          ><span>{{ form.tel }}</span>
        </div>
        <div>
          <span class="db-title flex flex-end">回复用户:</span
          ><el-input
            type="textarea"
            resize="none"
            placeholder="请求输入内容"
            v-model="textarea2"
          ></el-input>
          <span class="must">必填</span>
        </div>
        <div>
          <span class="db-title flex flex-end" style="color: #37c1c3"
            >常用回复:</span
          >
          <div style="width: 440px">
            <div class="qk-reply" @click="copy(1)">{{ quickReply }}</div>
            <div @click="copy(3)">{{ quickReply2 }}</div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer flex just-center">
        <el-button type="primary" @click="sendSingle">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      custom-class="dia-watch"
      :visible.sync="dialogFormVisible2"
      width="644px"
    >
      <div slot="title" class="dialog-footer">
        <div class="dia-title flex align-center">
          <img src="../../assets/images/watch.png" alt="" />查看
        </div>
      </div>
      <div class="dia-body">
        <div>
          <span class="db-title flex flex-end">id:</span>
          <span>{{ form.id }}</span>
        </div>
        <div>
          <span class="db-title flex flex-end">网址:</span>
          <span class="cursor" style="color: #888" @click="openUrl(form.url)">{{ form.url }}</span>
        </div>
        <div style="color: #888; margin: 0 0 10px 70px">
          （注:若页面内容存在问题，必须先修改页面内容再完善下面信息）
        </div>
        <div>
          <span class="db-title flex flex-end">反馈内容:</span>

          <span>
            {{ form.feed_content }}
          </span>
        </div>
        <div>
          <span class="db-title flex flex-end">联系电话:</span
          ><span>{{ form.tel }}</span>
        </div>
        <div>
          <span class="db-title flex flex-end">回复用户:</span
          ><el-input
            type="textarea"
            :disabled="true"
            resize="none"
            v-model="form.reply_content"
          ></el-input>
          <span class="must">必填</span>
        </div>
        <div>
          <span class="db-title flex flex-end">常用回复:</span>

          <span
            >非常抱歉带给您不好的体验，您可通过电话0755-82180123与我们联系，再次感谢您的反馈，我们将一直完善我们的服务，给您带来更好的体验，祝您生活愉快~</span
          >
        </div>
      </div>
      <div slot="footer" class="dialog-footer flex just-center">
        <el-button type="primary" @click="dialogFormVisible2 = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      custom-class="dia-check"
      :visible.sync="dialogFormVisible3"
      width="644px"
      @close="closeCheck"
    >
      <div slot="title" class="dialog-footer">
        <div class="dia-title flex align-center">
          <img src="../../assets/images/nof-send.png" alt="" />批量发送消息
        </div>
      </div>
      <div class="dia-body">
        <div>
          <span class="db-title flex flex-end">id:</span>
          <div>
            <span v-for="(item, index) in idList" :key="index"
              >{{ item }};
            </span>
          </div>
        </div>
        <div style="margin-bottom: 20px">
          <span class="db-title flex flex-end">回复消息:</span
          ><el-input
            type="textarea"
            resize="none"
            placeholder="请输入内容"
            v-model="textarea1"
          ></el-input>
          <span class="must">必填</span>
        </div>
        <div>
          <span class="db-title flex flex-end" style="color: #37c1c3"
            >常用回复:</span
          >
          <div style="width: 440px">
            <div class="qk-reply" @click="copy(2)">{{ quickReply }}</div>
            <div @click="copy(4)">{{ quickReply2 }}</div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer flex just-center">
        <el-button type="primary" @click="sendMany">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { get, post } from "../../axios/request";

export default {
  data() {
    return {
      inputId: "",
      inputZd: "",
      inputKey: "",
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      textarea1: "",
      textarea2: "",
      form: {},
      tableData: [],
      currentPage: 1,
      idList: [],
      dataCount: 0,
      quickReply:
        "非常抱歉带给您不好的体验，我们对您提供的问题已进行整改。如需进一步的需求沟通，可通过我们的人工热线4009999087与我们联系。再次感谢您的反馈，我们将一直完善我们的服务，给您带来更好的体验，祝您生活愉快~",
      quickReply2:
        "非常抱歉带给您不好的体验，由于我们对您提供的问题了解不够清晰。可通过我们的人工热线4009999087进一步沟通，期待您的来电。再次感谢您的反馈，我们将一直完善我们的服务，给您带来更好的体验，祝您生活愉快~",
    };
  },
  // watch: {
  //   $route(to) {
  //     if (to.path == "/finish") {
  //       this.getFinish(1);
  //     }
  //   },
  // },
  created() {
    this.getFinish(1);
  },
  methods: {
    /**
     * 获取已完结信息
     */
    getFinish(pages) {
      let data = {
        status: "4",
        size: 10,
      };
      get(`index.php?ac=list&page=${pages}`, data).then((res) => {
        if (res.data.code === -2) {
          window.location.replace("https://houtai.wh.bendibao.com/login.php");
        } else if (res.data.code === 0) {
          this.tableData = res.data.data;
          this.dataCount = res.data.count;
          this.tableData.forEach((val) => {
            let delayDate = this.calculate(val.add_time);
            val["delayDate"] = delayDate + "天";

            let statusType = this.tranStatus(val.status);
            val["statusType"] = statusType;

            let satisfType = this.tranSatisf(val.satisfaction);
            val["satisfaction"] = satisfType;
          });
        }
      });
    },

    /**
     * 转换状态
     */
    tranStatus(status) {
      if (status == 1) {
        return "未审核";
      } else if (status == 2) {
        return "审核中";
      } else if (status == 3) {
        return "退回";
      } else if (status == 4) {
        return "已完结";
      } else if (status == 5) {
        return "已发送信息";
      }
    },
    /**
     * 转换满意度
     */
    tranSatisf(satisf) {
      if (satisf == 1) {
        return "不满意";
      } else if (satisf == 2) {
        return "满意";
      } else if (satisf == 3) {
        return "很满意";
      }
    },

    /**
     * 计算延期时间
     */
    calculate(addTime) {
      let date = new Date(addTime);
      let now = new Date();
      let delta = (now - date) / 1000; // 秒差值

      // 把差值换算成:  天时分秒
      let days = parseInt(delta / 3600 / 24) + "";
      return days;
    },

    /**
     * 单个发送消息
     */
    sendSingle() {
      let data = {
        ac: "sendMsg",
        id: this.form.id,
        reply_content: this.textarea2,
      };

      post("index.php", data).then((res) => {
        this.dialogFormVisible1 = false;
        this.textarea2 = "";
        this.getFinish(this.currentPage);
      });
    },
    /**
     * 批量发送消息
     */
    sendMany() {
      let data = {
        ac: "sendMsg",
        id: this.idList,
        reply_content: this.textarea1,
      };
      post("index.php", data).then((res) => {
        if (res.data.code == 0) {
          this.textarea1 = "";
          this.dialogFormVisible3 = false;
        } else if (res.data.code == -1) {
          this.$message.error(`${res.data.msg}`);
        }
      });
    },

    /**
     * 勾选框事件
     * @method addId
     */
    addId(val, select) {
      this.idList.forEach((item, index) => {
        if (item == select.id) {
          this.idList.splice(index, 1);
        }
      });
      val.forEach((el, idx) => {
        this.idList.push(el.id);
      });
      this.idList = Array.from(new Set(this.idList));
    },

    /**
     * 城市分页切换按钮
     * @method handleCurrentChange
     * @param val 当前页
     */
    handleCurrentChange(val) {
      this.currentPage = val;
      let data = {
        status: "4",
        page: val,
        size: 10,
      };
      get("index.php?ac=list", data).then((res) => {
        this.tableData = res.data.data;
        this.tableData.forEach((val) => {
          let delayDate = this.calculate(val.add_time);
          val["delayDate"] = delayDate + "天";

          let statusType = this.tranStatus(val.status);
          val["statusType"] = statusType;

          let satisfType = this.tranSatisf(val.satisfaction);
          val["satisfaction"] = satisfType;
        });
        this.$nextTick(() => {
          this.tableData.forEach((row) => {
            if (this.idList.indexOf(row.id) >= 0) {
              this.$refs.multipleTable.toggleRowSelection(row, true);
            }
          });
        });
        console.log(this.tableData);
      });
    },

    /**
     * 打开弹窗
     */
    openDialog(val, num) {
      this.form = JSON.parse(JSON.stringify(val));
      if (num == 1) {
        this.dialogFormVisible1 = true;
      } else if (num == 2) {
        this.dialogFormVisible2 = true;
      }
    },

    /**
     * 打开批量发送弹窗
     */
    sendAll() {
      if (this.idList.length == 0) {
        this.$message.error(`请先勾选问题`);
      } else {
        this.dialogFormVisible3 = true;
      }
    },

    /**
     * 快捷回复
     */
    copy(num) {
      if (num == 1) {
        this.textarea2 = this.quickReply;
      } else if (num == 2) {
        this.textarea1 = this.quickReply;
      } else if (num == 3) {
        this.textarea2 = this.quickReply2;
      } else if (num == 4) {
        this.textarea1 = this.quickReply2;
      }
    },

    closeCheck() {
      this.textarea2 = "";
      this.textarea1 = "";
    },

    /**
     * 顶部搜索按钮事件
     */
    searchId() {
      let data = {
        status: "4",
        id: this.inputId,
        cityname: this.inputZd,
        keywords: this.inputKey,
      };
      get("index.php?ac=list&page=1", data).then((res) => {
        if (Array.isArray(res.data.data)) {
          this.tableData = res.data.data;
        } else {
          this.tableData = [];
          this.tableData.push(res.data.data);
        }
        this.tableData.forEach((val) => {
          let delayDate = this.calculate(val.add_time);
          val["delayDate"] = delayDate + "天";

          let statusType = this.tranStatus(val.status);
          val["statusType"] = statusType;
        });
      });
    },

    openUrl(url){
      window.open(url)
    },
  },
};
</script>

<style>
.finish {
  padding: 20px 56px 20px 20px !important;
}
.tools {
  padding: 25px 25px 25px 0;
  border: 1px solid #ebeef5;
  border-top: none;
}

.send-all {
  margin: 0 0 50px 0;
  padding: 12px 20px;
  border-radius: 5px;
  background-color: #41d2d4;
  color: #ffffff;
  font-size: 16px;
}
.tools .el-pagination {
  padding: 0;
  margin-right: 25px;
}
.tools .el-pagination .btn-prev {
  height: 34px;
  padding: 6px 10px;
  border: 1px solid #ebebeb;
  border-radius: 5px;
  font-size: 16px;
  color: #999999;
}
.tools .el-pagination .btn-next {
  height: 34px;
  padding: 6px 10px;
  border: 1px solid #ebebeb;
  border-radius: 5px;

  color: #999999;
}
.tools .el-pager li {
  width: 34px;
  height: 34px;
  padding: 2px 0 0 0;
  margin: 0 5px;
  border: 1px solid #ebebeb;
  border-radius: 5px;
  color: #999999;
}

.tools .el-pagination__jump {
  position: relative;
  width: 80px;
  height: 34px !important;

  color: #fff;
}
.tools .el-input__inner {
  width: 50px;
  color: #999;
  height: 34px !important;
}
.tools .el-pager li.active {
  color: #fff;
  background-color: #41d2d4;
}
.tools .el-pagination__jump:before {
  position: absolute;
  top: 2px;
  left: 6px;
  font-size: 16px;
  content: "\53bb" !important;
  color: #999999;
}
.tools .el-pagination__jump:after {
  font-size: 16px;
  content: "\9875" !important;
  color: #999999;
}
.el-icon-arrow-left:before {
  content: "\4e0a\4e00\9875" !important;
  color: #999999;
  font-weight: 400;
  font-size: 16px;
}
.el-icon-arrow-right:before {
  font-size: 16px;
  content: "\4e0b\4e00\9875" !important;
  color: #999999;
  font-weight: 400;
}

.qk-reply {
  margin-bottom: 10px;
}
</style>